<template>
  <div class="recommend">
    <div class="recommend-title">
      <h3>推荐相册</h3>
    </div>
    <div class="recommend-list">
      <AlbumItem v-for="(album, index) in props.albums" :key="index" :album="album" />
    </div>
  </div>
</template>

<script setup>
import AlbumItem from "./AlbumItem.vue"; // 假设将相册项提取为单独组件

const props = defineProps({
  albums: {
    type: Array,
    required: true,
  }
})
</script>

<style scoped>
.recommend {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
}

.recommend-title {
  text-align: center;
  margin-bottom: 20px;
}

.recommend-title h3 {
  font-size: 1.5rem;
  color: #333;
  margin: 0;
}

.recommend-list {
  display: grid;
  grid-template-columns: repeat(4, 1fr); /* 大屏幕：一行 4 个 */
  gap: 20px;
}

/* 响应式布局 */
@media (max-width: 1024px) {
  .recommend-list {
    grid-template-columns: repeat(3, 1fr); /* 中屏幕：一行 3 个 */
  }
}

@media (max-width: 768px) {
  .recommend-list {
    grid-template-columns: repeat(2, 1fr); /* 小屏幕：一行 2 个 */
  }
}

@media (max-width: 480px) {
  .recommend-list {
    grid-template-columns: 1fr; /* 超小屏幕：一行 1 个 */
  }
}
</style>